import { useRef } from 'react'
import { Button, Input } from 'antd'
import { history, useDispatch } from 'umi'
import { useSelector } from '@/useHooks/index'
import { getUserLogin } from '@/services'
import { Progress, Table, Tag, Space  } from 'antd';
const columns = [
  {
    title: 'Name',
    dataIndex: 'name',
    key: 'name',
    render: (text:any) => <a>{text}</a>,
  },
  {
    title: 'Age',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: 'Address',
    dataIndex: 'address',
    key: 'address',
  },
  {
    title: 'Tags',
    key: 'per',
    dataIndex: 'per',
    render: (tags:any) => (

      <>
      {console.log(tags, 'tags')}
       <Progress percent={tags} />
      </>
    ),
  },
  {
    title: 'Action',
    key: 'action',
    render: (text:any, record:any) => (
      <Space size="middle">
        <a>Invite {record.name}</a>
        <a>Delete</a>
      </Space>
    ),
  },
];

const data = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
    per: 0
  },
  {
    key: '2',
    name: 'Jim Green',
    age: 42,
    address: 'London No. 1 Lake Park',
    tags: ['loser'],
    per: 10
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    address: 'Sidney No. 1 Lake Park',
    tags: ['cool', 'teacher'],
    per: 30
  },
];

const Login = () => {

  const dispatch:any = useDispatch();
  const userInput:any = useRef();
  const userPass:any = useRef();
  const hanleLogin = async () => {
    dispatch({
      type: 'users/getLogin',
      payload: {
        username: userInput.current.state.value.trim(),
        password: userPass.current.state.value.trim()
      }
    }).then((res:any) => {
      console.log('登陆接口:', res)
      if (res.code === 200) {
        // 跳转首页
        window.location.href = '/pms/product'
      }
    })
  }

  return <div>
    Login

    <Table columns={columns} dataSource={data} />

      <Progress percent={30} />

    <Input ref={userInput} /> <br />
    <Input ref={userPass} /> <br />

    <Button type="primary" onClick={hanleLogin}>登陆</Button>
  </div>
}

export default Login;
